﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SignalR MoveShape Demo</title>
    <style>
        #shape{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
    </style>
</head>
<body>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script>
    $(function() {
        var contosoChatHubProxy = $.connection.contosoChatHub;
        contosoChatHubProxy.state.userName = "Fadi Fakhouri";
        contosoChatHubProxy.state.computerName = "fadivm1";

        contosoChatHubProxy.client.addNewMessageToPage = function(name,message) {
            console.log(`${name} ${message}`);
        };
        $.connection.hub.start().done(function() {
            // Wire up Send button to call NewContosoChatMessage on the server.
            $('#newContosoChatMessage').click(function () {
                contosoChatHubProxy.server.newContosoChatMessage($('#displayname').val(), $('#message').val());
                $('#message').val('').focus();
            });
            //without the generated proxy
            $('#newContosoChatMessage').click(function () {
                contosoChatHubProxy.invoke('newContosoChatMessage', $('#displayname').val(), $('#message').val());
                $('#message').val('').focus();
            });

        });

        var myHub = $.connection.myHub;
        myHub.server.send("<script>")
            .fail(function (e) {
                if (e.source === 'HubException') {
                    console.log(e.message + ' : ' + e.data.user);
                }
            });
        //different server
        $.connection.hub.url = "<yourbackendurl>";

        //set a query string value before calling the start method
        $.connection.hub.qs = { "varsion": "1.0" };
        //client codeo that specifies the transport method
        $.connection.hub.start({ transport: ["webSockets", "longPolling"] }).done(function() {
            console.log(`connected,stransport=${$.connection.hub.transport.name}`);
        });
        //define method on client
        var connection = $.hubConnection();
        var hubProxy = connection.createHubProxy("contosoChatHub");
        hubProxy.on("addContosoChatMessageToPage", function(name,message) {
            console.log(`${name} ${message}`);
        });
        //handle connection lifetime events
        $.connection.hub.connectionSlow(function() {
            console.log(`we are currently experiencing difficulties with connection.`);
        });
        //handle errors
        $.connection.hub.error(function() {
            console.log(`signalR error:${error}`);
        });
        //enable client-side logging
        $.connection.hub.logging = true;
        $.connection.hub.start();
    });
</script>
<div id="shape"></div>
</body>
</html>